<template>
  <div class="main">
    <transition name="fade">
      <el-card v-show="isHide" class="page-tools">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="18">
            <el-form :inline="true" :model="form" size="mini">
              <el-form-item :label="searchTxt">
                <el-input
                  v-model.trim="form.searchKey"
                  :placeholder="`输入${searchTxt}`"
                >
                  <template #append>
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                      @click="onSearchKey"
                    />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="isShowCate" label="文章分类">
                <el-select
                  v-model="form.category_id"
                  placeholder="请选择文章分类"
                  @change="onCategoryChange"
                >
                  <el-option
                    v-for="cate in cates"
                    :key="cate.id"
                    :label="cate.name"
                    :value="cate.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="isShowTag" label="文章标签">
                <el-select
                  v-model="form.tag_id"
                  placeholder="请选择文章标签"
                  @change="onTagChange"
                >
                  <el-option
                    v-for="tag in tags"
                    :key="tag.id"
                    :label="tag.name"
                    :value="tag.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </transition>
    <div class="tip">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="6">
          <el-button
            v-if="isShowAdd"
            size="mini"
            :disabled="!checkPermission('point-add')"
            @click="onAdd"
          >{{ addTxt }}</el-button>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-tooltip
              class="item"
              effect="dark"
              content="隐藏操作栏"
              placement="bottom"
            >
              <el-button
                icon="el-icon-s-tools"
                size="mini"
                circle
                @click="onHide"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="刷新"
              placement="bottom"
            >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                circle
                @click="onRefresh"
              />
            </el-tooltip>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'PageTools',
  props: {
    searchTxt: {
      type: String,
      required: true
    },
    addTxt: {
      type: String,
      default: '新增'
    },
    isShowCate: {
      type: Boolean,
      default: false
    },
    isShowTag: {
      type: Boolean,
      default: false
    },
    isShowAdd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isHide: true,
      form: {},
      cates: store.getters.cates,
      tags: store.getters.tags
    }
  },
  methods: {
    onHide() {
      this.isHide = !this.isHide
    },
    onSearchKey() {
      this.$emit('onSearchKey', this.form.searchKey)
    },
    onCategoryChange(val) {
      this.$emit('onCategoryChange', val)
    },
    onTagChange(val) {
      this.$emit('onTagChange', val)
    },
    onAdd() {
      this.$emit('onAdd')
    },
    onRefresh() {
      this.$emit('onRefresh')
      this.form = {}
    }
  }
}
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.page-tools {
  margin: 10px 0;
  .before {
    line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}
.tip {
  margin-bottom: 5px;
}
</style>
